<template>
  <div class="dialog-form page">
    <div class="base-container">
      <p class="title">基本信息</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="渠道号：">{{ form.channelCode }}</el-descriptions-item>
        <el-descriptions-item label="渠道名称：">{{ form.channelName }}</el-descriptions-item>
        <el-descriptions-item label="客户端：">
          <div style="display: inline-block">
            <dict-tag v-model="form.channelType" :options="bus_channel_code" :value="form.channelType" disabled />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="商户号：">{{ form.channelMchId }}</el-descriptions-item>
        <el-descriptions-item label="AppID：">{{ form.channelAppId }}</el-descriptions-item>
        <el-descriptions-item label="渠道状态：">{{ form.enabled == 1 ? '启用' : '禁用' }}</el-descriptions-item>
      </el-descriptions>
    </div>
    
    <el-form :model="form" :rules="rules" ref="channelConfigRef" label-width="100px" label-position="top">
      <el-row class="base-container mt-10px">
        <el-col :span="24">
          <p class="title">渠道支付配置</p>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付模式" prop="payListArr" label-width="auto">
          <el-checkbox-group v-model="form.payListArr" @change="handlePayListChange">
            <!-- <el-checkbox v-for="(item, index) in payList" :key="index" :value="item.dicValue">{{item.payName}}</el-checkbox> -->
            <el-checkbox 
              :disabled="form.channelType != 1014 && form.channelType != 1015"
              key="1" value="11">储值</el-checkbox>
            <el-checkbox key="2" value="10">代扣</el-checkbox>
          </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col v-if="contains(form.payListArr, '11')" :span="12">
          <el-form-item label="储值支付方式" prop="storedValueArr" label-width="auto">
            <el-checkbox-group v-model="form.storedValueArr">
              <!-- <el-checkbox  v-for="(item, index) in storedValue" :key="index" :label="item.dicValue">{{item.payName}}</el-checkbox> -->
              <el-checkbox key="13" value="02">微信</el-checkbox>
              <el-checkbox key="14" value="03">支付宝</el-checkbox>
              <el-checkbox key="15" value="04">银联</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代扣支付方式" prop="withholdArr" label-width="auto">
            <el-checkbox-group v-model="form.withholdArr" @change="handleWithholdArrChange">
              <!-- <el-checkbox v-for="(item, index) in withhold" :key="index" :label="item.dicValue">{{item.payName}}</el-checkbox> -->
              <el-checkbox 
                :disabled="(form.channelType != 1014 && form.channelType != 1015) || !contains(form.payListArr, '11')"
                key="3" value="01">卡余额</el-checkbox>
              <el-checkbox 
                :disabled="form.channelType == 1013 || (contains(form.payListArr, '11') && !contains(form.payListArr, '10'))" 
                key="4" value="02">微信</el-checkbox>
              <el-checkbox 
                :disabled="form.channelType == 1012 || (contains(form.payListArr, '11') && !contains(form.payListArr, '10'))" 
                key="5" value="03">支付宝</el-checkbox>
              <el-checkbox 
                :disabled="(form.channelType != 1014 && form.channelType != 1015) || (contains(form.payListArr, '11') && !contains(form.payListArr, '10'))"
                key="6" value="04">银联</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <!-- <el-col v-if="form.channelType == 1014 || form.channelType == 1015" :span="12">
          <el-form-item label="提现方式" prop="withdrawalArr" label-width="auto">
            <el-checkbox-group v-model="form.withdrawalArr">
              <el-checkbox v-for="(item, index) in withdrawal" :key="index" :value="item.dicValue">{{item.payName}}</el-checkbox>
              <el-checkbox key="16" value="02">微信</el-checkbox>
              <el-checkbox key="17" value="03">支付宝</el-checkbox>
              <el-checkbox key="18" value="04">银联</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col> -->
      </el-row>

      <el-row class="base-container mt-10px">
        <el-col>
          <p class="title">渠道费率配置</p>
        </el-col>
        <template v-if="form.channelType == 1012 || contains(form.withholdArr, '02')">
          <el-col :span="7">
            <el-form-item label="微信渠道费率" prop="wxRates">
              <div class="flex items-center flex-1">
                <el-input-number :min="0.01" :max="100" :precision="2" v-model="form.wxRates" placeholder="" />
                <p class="unit">%</p>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
        </template>
        <template v-if="form.channelType == 1013 || contains(form.withholdArr, '03')">
          <el-col :span="7">
            <el-form-item label="支付宝渠道费率" prop="zfbRates">
              <div class="flex items-center flex-1">
                <el-input-number :min="0.01" :max="100" :precision="2" v-model="form.zfbRates" placeholder="" />
                <p class="unit">%</p>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
        </template>
        <el-col :span="7" v-if="contains(form.withholdArr, '04')">
          <el-form-item label="银联渠道费率" prop="ylRates">
            <div class="flex items-center flex-1">
              <el-input-number :min="0.01" :max="100" :precision="2" v-model="form.ylRates" placeholder="" />
              <p class="unit">%</p>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="base-container mt-10px">
        <el-col :span="24">
          <p class="title">渠道订单配置</p>
        </el-col>
        <el-col :span="24">
          <el-form-item label="渠道订单上报地址" prop="channelOrderApiAddress" label-width="auto">
            <el-input v-model="form.channelOrderApiAddress" placeholder="请输入渠道订单上报地址" maxlength="200" type="textarea" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.channelType == 1012 || form.channelType == 1013">
          <el-form-item label="上报地址私钥" prop="thirdPublicKey" label-width="auto">
            <el-input v-model="form.thirdPublicKey" placeholder="请输入上报地址私钥" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getChannel, getPayConfig, configChannel } from "@/api/channel/platchannelinfo"

const { proxy } = getCurrentInstance()
// 客户端：101微信小程序   102支付宝小程序   103自由APP    104第三方APP   105终端机具 
const { bus_channel_code } = proxy.useDict('bus_channel_code')

const emits = defineEmits(['cancel', 'confirm'])

const channelConfigRef = ref()
const payList = ref([])
const storedValue = ref([])
const withhold = ref([])
const withdrawal = ref([])
const form = ref({
  id: null,
  channelName: null,
  codeId: null,
  enabled: 1,
  channelCode: null,
  channelType: null,
  channelMchId: null,
  channelAppId: null,
  channelOrderApiAddress: null,
  wxRates: null,
  zfbRates: null,
  ylRates: null,
  payListArr: [],
  storedValueArr: [],
  withholdArr: [],
  withdrawalArr: [],
  thirdPublicKey: null,
})
const rules = {
  channelOrderApiAddress: [
    { required: true, message: "订单上报地址不能为空", trigger: "blur" }
  ],
  payListArr: [
    { required: true, message: "支付模式没有选择", trigger: "blur" }
  ],
  storedValueArr: [
    { required: true, message: "储值支付方式没有选择", trigger: "blur" }
  ],
  withholdArr: [
    { required: true, message: "代扣支付方式没有选择", trigger: "blur" }
  ],
  withdrawalArr: [
    { required: true, message: "提现方式没有选择", trigger: "blur" }
  ],
  wxRates: [
    { required: true, message: "请输入微信渠道费率", trigger: "blur" }
  ],
  zfbRates: [
    { required: true, message: "请输入支付宝渠道费率", trigger: "blur" }
  ],
  ylRates: [
    { required: true, message: "请输入银联渠道费率", trigger: "blur" }
  ],
}

const pageInit = (id) => {
  // getPayConfig().then(response => {
  //   payList.value = response.data.payList
  //   storedValue.value = response.data.storedValue
  //   withhold.value = response.data.withhold
  //   withdrawal.value = response.data.withdrawal
  // })
  getChannel(id).then(response => {
    form.value = response.data
    form.value.wxRates = Number(form.value.wxRates)
    form.value.zfbRates = Number(form.value.zfbRates)
    form.value.ylRates = Number(form.value.ylRates)
    form.value.payListArr = form.value.payListArr || []
    form.value.withdrawalArr = form.value.withdrawalArr || []
    form.value.withholdArr = form.value.withholdArr || []
    form.value.storedValueArr = form.value.storedValueArr || []
    if (form.value.channelType == 1012) {
      // 微信小程序
      form.value.payListArr = ['10']
      form.value.withholdArr = ['02']
    }
    if (form.value.channelType == 1013) {
      // 支付宝小程序
      form.value.payListArr = ['10']
      form.value.withholdArr = ['03']
    }
    if (form.value.channelType == 1014 || form.value.channelType == 1015) {
      // APP
      if (!form.value.payListArr || !form.value.payListArr.length) {
        // 默认代扣
        form.value.payListArr = ['10']
      }
      // if (!form.value.withholdArr || !form.value.withholdArr.length) {
      //   // 默认储值
      //   form.value.withholdArr = ['01']
      // }
    }
  })
}

// 支付模式变化
const handlePayListChange = (arr) => {
  if (form.value.channelType == 1014 || form.value.channelType == 1015) {
    // APP
    // 10 – 代扣    11 – 储值
    if (arr.length == 1) {
      if (arr.indexOf('11') > -1) {
        form.value.withholdArr = ['01']
      } else if (arr.indexOf('10') > -1) {
        const index = form.value.withholdArr.indexOf('01')
        if (index > -1) {
          form.value.withholdArr.splice(index, 1)
        }
      }
    } else if (arr.length == 0) {
      form.value.withholdArr = []
    } else {
      const index = form.value.withholdArr.indexOf('01')
      if (index == -1) {
        form.value.withholdArr.push('01')
      }
    }
  }
}

// 代扣支付方式变化
const handleWithholdArrChange = (arr) => {
  if (form.value.channelType == 1014 || form.value.channelType == 1015) {
    // APP
    const index = arr.indexOf('01')
    const modeIndex = form.value.payListArr.indexOf('11')
    if (index == -1 && modeIndex > -1) {
      // 没选卡余额
      form.value.payListArr.splice(modeIndex, 1)
    }
  }
}

const contains = (arr, str) => {
  if (arr && str) {
    return arr.indexOf(str) > -1
  }
  return true
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  channelConfigRef.value.validate(valid => {
    if (valid) {
      configChannel(form.value).then(response => {
        proxy.$modal.msgSuccess("配置成功")
        channelConfigRef.value.resetFields()
        emits('confirm')
      })
    }
  })
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>
@import '../../../assets//styles/variables.module.scss';
.page {
  background-color: $main-bg-color;
  margin: -20px -16px;
  padding: 10px 10px 0;
}

.title {
  color: rgb(31, 31, 31);
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgb(225, 225, 225);
}

.descriptions {
  :deep(.el-descriptions__cell) {
    width: 33.33%
  }

  :deep(.el-descriptions__content) {
    word-break: break-all;
  }
}

.dialog-footer {
  margin-left: -10px;
  margin-right: -10px;
  background-color: #fff;
}

.unit {
  width: 32px;
  height: 32px;
  background-color: #f5f7fa;
  text-align: center;
  line-height: 32px;
  color: rgb(75, 75, 75);
  border-radius: 0 4px 4px 0;
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
  margin-left: -1px;
}

</style>